<template>
	<view class="wrap">
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/tool/tool-nav-bg@2x.png" mode="widthFix"
			class="property-bg"></image>

		<view class="index-nav" :style="{
			background: scrollTop > 50 ? 'linear-gradient(90deg, #FD8D24 0%, #FF2E3F 100%, #FF323B 100%)' : 'transparent'
		}">
			<view class="status_bar">

			</view>
			<view class="flex items-center justify-between py-32">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/tool/tool-title.png"
					class="index-title" mode="heightFix"></image>
			</view>
		</view>

		<view class="content px-20">
			<view class="bg-FFF round-24 py-24 px-28 flex items-center justify-between">
				<view class="box-1" style="color: #FF550A;">
					领袖学院
				</view>
				<view class="box-1" style="background-color: #FFEA6B;" @click="$tab.nav(`/pages/index/notice/index`)">
					最新公告
				</view>
			</view>

			<!-- #ifdef APP || H5 -->
			<!-- <view class="bg-FFF round-24 py-24 px-28 mt-32">
				<view class="flex items-center justify-between">
					<view class="" style="color: #999999;">
						社群论坛
					</view>
					<view class="flex items-center">
						<view class="">
							更多
						</view>
						<u-icon name="arrow-right" color="#000"></u-icon>
					</view>
				</view>
			
				<view class="flex flex-wrap justify-between">
					<view class="box-2 p-20 mt-32 flex items-center justify-between" v-for="(item,index) in appToolList"
						:key="index">
						<view class="text-32 font-500">
							{{item.title}}
						</view>
						<view class="box-3 flex items-center justify-around">
							<image
								:src="`https://file.fulewanjia.com/fulewanjia/profile/appImages2/${item.icon}@2x.png`"
								class="image-48" mode=""></image>
						</view>
					</view>
				</view>
			</view> -->
			<!-- #endif -->

			<div class="bg-FFF round-24 p-32 mt-32">
				<div class="flex items-center justify-between">
					<div class="">
						<u-tabs :list="videoTabs" :current="videoTabIndex" lineWidth="52rpx" lineColor="#FF540A" :activeStyle="{
						            color: '#FF540A',
						            fontWeight: 'bold',
						            transform: 'scale(1.05)'
						        }" :inactiveStyle="{
						            color: '#999999',
						            transform: 'scale(1)'
						        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="getData">
						</u-tabs>
					</div>

					<div class="flex items-center" @click="$tab.nav('/pages/chat/shortPlay/index')">
						<div class="text-24" style="color: #9E9E9E;">
							全部短剧
						</div>
						<u-icon name="arrow-right" color="#9E9E9E"></u-icon>
					</div>
				</div>
				
				<div class="video-list">
					<div class="w-full mt-32" v-for="(item,index) in shortVideoList" :key="item.id" @click="$tab.nav(`/pages/chat/shortPlay/detail?id=${item.id}`)">
						<div class="poster" :style="{
							background: `url(${globalConfig.imagePrefix}${item.icon}) no-repeat`,
							backgroundSize: '100% 100%'
						}">
							<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages5/top${index+1}@2x.png`" mode="widthFix" style="width: 64rpx;"></image>
						</div>
						<div class="mt-12 font-500">
							{{item.name}}
						</div>
						<div class="" style="color: #999999;">
							{{item.status == '1' ? '已完结' : '连载中'}}·共{{item.totalMuster}}集
						</div>
					</div>
				</div>
			</div>


			<view class="py-28 px-32 bg-FFF mt-32 round-24">
				<view class="text-9E9E9E">
					我的工具
				</view>
				<view class="grid grid-cols-4 gap-4">
					<view class="mt-36 flex items-center flex-col" v-for="(item,index) in chatToolList" :key="index"
						@click="handleTool(item)">
						<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages/tool/${item.icon}`"
							style="width: 72rpx;height: 72rpx;" mode=""></image>
						<view class="text-nowrap mt-20" :style="{
							color:item.active ? '#333' : '#ACACAC'
						}">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				tabsList: [
					"常用工具",
					"聊天工具",
					"应用工具",
				],
				tabIndex: 0,
				commonList: [],
				chatToolList: [{
						icon: "icon_qunliao@2x.png",
						title: "我的群聊",
						active: true
					},
					// #ifdef APP
					{
						icon: "icon_aizhiliao.png",
						title: "AI Chat智聊",
					},
					{
						icon: "icon_haoyouliebiao.png",
						title: "好友列表",
					},
					// #endif
				],
				appToolList: [{
						icon: "icon_daxueshen",
						title: "大学生社区",
					},
					{
						icon: "icon_qiyejia",
						title: "企业家社区",
					},
					{
						icon: "icon_yunfu",
						title: "宝妈社区",
					},
					{
						icon: "icon_chuangye",
						title: "创业社区",
					},
					{
						icon: "icon_xiyanghong",
						title: "夕阳红社区",
					},
					{
						icon: "icon_zhaiwu",
						title: "债务社区",
					},
				],
				videoTabs:[
					{
						name:'精选短剧',
					},
					{
						name:'我的追剧'
					}
				],
				shortVideoList:[],
				videoTabIndex:0,
				globalConfig:getApp().globalData.config
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onShow() {
			if (uni.getStorageSync('commonList')) {
				this.commonList = JSON.parse(uni.getStorageSync('commonList'))
			}
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			
			this.getData({
				index:0
			})
		},
		onShareAppMessage() {

		},
		methods: {
			async getData(e){
				this.shortVideoList = []
				if(e.index == 0){
					const res = await this.$Api.shortPlay.shortPlayList({
						pageNum:1,
						pageSize:6,
						delicate:1
					})
					this.shortVideoList = res.rows
				}else{
					const res = await this.$Api.shortPlay.myShortPlay({
						pageNum:1,
						pageSize:6,
					})
					this.shortVideoList = res.rows
				}
			},
			handleTool(row) {
				switch (row.title) {
					case "我的群聊":
						// #ifdef MP-WEIXIN
						uni.navigateToMiniProgram({
							appId: 'wxd54ad85dbe674bcd',
							path: '/pages/chat/index?groupId=92&isGroup=1&newUser=1',
							success(res) {
								// 打开成功
							}
						})
						// #endif
						// #ifndef MP-WEIXIN
						plus.share.getServices(
							res => {
								let sweixin = null;
								for (let i in res) {
									if (res[i].id == 'weixin') {
										sweixin = res[i];
									}
								}
								//唤醒微信小程序
								if (sweixin) {
									sweixin.launchMiniProgram({
										id: 'gh_54cde2bc9b29', //微信开放平台 --- 绑定的微信小程序的 --- 原始id
										type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
										path: '/pages/chat/index?groupId=92&isGroup=1&newUser=1' //小程序的页面,用传的参数在小程序接值判断跳转指定页面
									});
								} else {
									this.$modal.msg('请先安装微信!')
								}
							}
						);
						// #endif
						break
					default:
						this.$modal.msg('功能尚在开发中!')
				}
				if (uni.getStorageSync('commonList')) {
					let list = JSON.parse(uni.getStorageSync('commonList'))
					let index = list.findIndex(item => {
						return item.title == row.title
					})
					if (index == -1 && row.active) {
						this.commonList.unshift(row)
					}
				} else {
					this.commonList.unshift(row)
				}
				uni.setStorageSync('commonList', JSON.stringify(this.commonList))
			}
		}
	}
</script>

<style lang="scss">
	.property-bg {
		width: 100%;
	}


	.index-nav {
		width: 100%;
		padding: 0rpx 32rpx 0 32rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;

		.index-title {
			height: 40rpx;
		}

		.index-xiaoxi {
			width: 48rpx;
			height: 48rpx;
		}
	}
	
	.video-list{
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12rpx;
		
		.poster{
			width: 100%;
			height: 292rpx;
			
		}
	}

	.content {
		.nav-tab-wrap {
			.tab {
				width: 176rpx;
				height: 68rpx;
				background: #D8D8D8;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				line-height: 68rpx;
			}
		}
	}

	.box-1 {
		width: 312rpx;
		height: 128rpx;
		background: #FFC8B0;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		line-height: 128rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}

	.box-2 {
		width: 312rpx;
		height: 192rpx;
		background: #F4F6FA;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.box-3 {
		width: 88rpx;
		height: 88rpx;
		background: #D5E3FF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>